<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 一,关于Vue3 的 provide / inject 使用
      // 1.1 父组件中通过provide来提供变量，子组件中通过inject来注入变量
      // 1.2 一旦provide中的变量发生变化，那么所有的inject中用到该变量的地方也会更新
      // 1.3 适用场景：比如一些通用的信息或配置，比如路由信息，store信息等

      // 二,使用方式 (setup语法)
      // 2.1 父组件中定义
      //  import { ref, provide } from "vue"
      //  let txt = ref(20)
      //  provide("providedKey", txt)
      // 2.2 子组件中注入
      //  import { inject } from "vue"
      //  let injectedValue = inject("providedKey")
      //  console.log(injectedValue)

      // 三,总结
      // 1. 父组件有一个provide函数，子组件有一个inject函数，子组件可以调用inject函数注入provide函数中提供的数据
      // 2. provide / inject类似于一个仓库,在父组件中存入数据,其他组件只需要引入使用即可

    </script>
  </body>
</html>
